<script lang="ts" setup>
//pinia用户信息
import {AppstoreOutlined, FireOutlined, MailOutlined, SettingOutlined, SyncOutlined} from "@ant-design/icons-vue";

//1-左侧菜单
import {h, onMounted, reactive, ref, VueElement} from 'vue';
import {ItemType} from 'ant-design-vue';
import {pageBulletinAPI} from "@/apis/bulletin.ts";
import {pageResumeAPI} from "@/apis/resume.ts";
import {useRouter} from "vue-router";
import {types} from "sass";

function getItem(
    label: VueElement | string,
    key: string,
    icon?: any,
    children?: ItemType[],
    type?: 'group',
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as ItemType;
}

const items: ItemType[] = reactive([
  getItem('Navigation One', 'sub1', () => h(MailOutlined), [
    getItem('Option 1', '1'),
    getItem('Option 2', '2'),
    getItem('Option 3', '3'),
    getItem('Option 4', '4'),
  ]),
  getItem('Navigation Two', 'sub2', () => h(AppstoreOutlined), [
    getItem('Option 5', '5'),
    getItem('Option 6', '6'),
    getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
  ]),
  getItem('Navigation Three', 'sub4', () => h(SettingOutlined), [
    getItem('Option 9', '9'),
    getItem('Option 10', '10'),
    getItem('Option 11', '11'),
    getItem('Option 12', '12'),
  ]),
]);

const state = reactive({
  rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
  openKeys: ['sub1'],
  selectedKeys: [],
});
const onOpenChange = (openKeys: string[]) => {
  const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
  if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
    state.openKeys = openKeys;
  } else {
    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
  }
};


//2-中间体内容
//轮播图


//3-右侧y优秀简历
const resumeCount = 10;
const resumePageCurrent = ref(1);
const resumeData = <any>reactive([]);
const resumeInitLoading = ref(true);
const resumePageTotal = ref(0);
const resumePage = ref(1);
const resumeLoading = ref(false);
const resumePageDate = <any>ref({
  pageCurrent: resumePageCurrent,
  pageSize: resumeCount,

  resumePrivacySetting: '公开',
});
onMounted(() => {
  getResumeList(resumePageDate.value);
})

const resumeOnLoadMore = () => {
  resumeLoading.value = true;
  resumeInitLoading.value = true;
  if (resumePageCurrent.value <= resumePage.value) {
    resumePageCurrent.value += 1;
  } else {
    resumePageCurrent.value = 1;
  }
  resumeData.splice(0, resumeData.length)
  getResumeList(resumePageDate.value).then(() => {
    resumeLoading.value = false;
  });
};
const getResumeList = async (resumePageDate: any) => {
  console.log(resumePageDate)
  pageResumeAPI(resumePageDate).then(res => {
    resumePageTotal.value = res.data.data.total;
    resumeData.push(...res.data.data.data)
    resumeLoading.value = false;
  })
}
//查看
const router = useRouter();
const goToResumeDetail = (resumeId: string) => {
  router.push({
    name: 'resumeDetail',
    params: {
      resumeId: resumeId // 确保传递的参数为字符串类型
    }
  });
};


//公告列表
const count = 8;
const pageCurrent = ref(1);
const bulletinData = <any>reactive([]);
const initLoading = ref(true);
const pageTotal = ref(0);
const loading = ref(false);
const bulletinPageDate = <any>ref({
  pageCurrent: pageCurrent.value,
  pageSize: count,
  bulletinStatus: '已发布',
});
onMounted(() => {
  getBulletinList(bulletinPageDate.value);
})

const onLoadMore = () => {
  loading.value = true;
  initLoading.value = true;
  pageCurrent.value += 1;
  getBulletinList(bulletinPageDate.value).then(() => {
    loading.value = false;
  });
};
const getBulletinList = async (bulletinPageDate: any) => {
  pageBulletinAPI(bulletinPageDate).then(res => {
    pageTotal.value = res.data.data.total;
    bulletinData.push(...res.data.data.data)
    initLoading.value = false;
  })
}


</script>

<template>
  <div class="jobseeker-home">
    <div class="left">
      <div class="friendship-link">
        <div class="friendship-link-item">
          <a-avatar :size="54" style="border: 0;margin-right: 10px">
            <template #icon>
              <img alt="" src="../../../assets/jobseeker/home/xtjj_img.png">
            </template>
          </a-avatar>
          <a href="https://juejin.cn/user/847071859442647" style="color: #1677FF"> 稀土掘金</a>
        </div>
        <div class="friendship-link-item">
          <a-avatar :size="54" style="border: 0;margin-right: 10px">
            <template #icon>
              <img alt="" src="../../../assets/jobseeker/home/yqlj_img.png">
            </template>
          </a-avatar>
          <a href="http://zengjin.icu/user/login?redirect=%2F" style="color: black">友情连接</a>
        </div>
        <div class="friendship-link-item">
          <a-avatar :size="54" style="border: 0;margin-right: 10px">
            <template #icon>
              <img alt="" src="../../../assets/jobseeker/home/bszp_img.png">
            </template>
          </a-avatar>
          <a href="https://www.zhipin.com/web/geek/job?query=Java&city=101050100" style="color: #53CAC3;"> boss直聘</a>
        </div>
        <div class="friendship-link-item">
          <a-avatar :size="54" style="border: 0;margin-right: 10px">
            <template #icon>
              <img alt="" src="../../../assets/jobseeker/home/bcdh_img.png">
            </template>
          </a-avatar>
          <a href="https://www.codefather.cn/course" style="color: #1890FF">编程导航</a>
        </div>

      </div>
    </div>
    <div class="main">
      <div class="carousel">
        <a-carousel autoplay>
          <div class="carousel-item"><img alt="" src="@/assets/jobseeker/home/img1.png"></div>
          <div class="carousel-item"><img alt="" src="@/assets/jobseeker/home/img2.png"></div>
          <div class="carousel-item"><img alt="" src="@/assets/jobseeker/home/img3.png"></div>
          <div class="carousel-item"><img alt="" src="@/assets/jobseeker/home/img4.png"></div>
          <div class="carousel-item"><img alt="" src="@/assets/jobseeker/home/img5.png"></div>
        </a-carousel>
      </div>
      <div>
        <div style="padding-left: 50px;border-bottom: 1px solid #ccc;">
          <h4>最新公告-文章</h4>
        </div>
        <div class="bulletin">
          <a-list
              :data-source="bulletinData"
              :loading="initLoading"
              item-layout="horizontal"
          >
            <template #loadMore>
              <div
                  v-if="!initLoading && !loading && bulletinData.length < pageTotal"
                  :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
              >
                <a-button @click="onLoadMore">获取更多</a-button>
              </div>
            </template>
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta
                    :description="item.bulletinText"
                    style="display: flex;align-items: center"
                >
                  <template #title>
                    <a href="https://www.antdv.com/">{{ item.bulletinTitle }}</a>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>


    </div>
    <div class="right">
      <div class="urgent_job">
        <div class="right-title">
          <div class="title-item">
            <FireOutlined style="color: red;font-size: 50px;margin-right: 10px"/>
            <h2>优秀-简历</h2>
          </div>
          <div class="title-item" @click="resumeOnLoadMore">
            <SyncOutlined style="font-size: 20px;margin-right: 10px"/>
            <h4>换一换</h4>
          </div>

        </div>
        <div class="urgent_job_list">
          <a-list :data-source="resumeData" item-layout="horizontal">
            <template #renderItem="{ item }">
              <a-list-item>

                <a-list-item-meta
                    :description="item.resumeEducationSchool+'&nbsp&nbsp&nbsp&nbsp'+item.resumeEducationMajor+'&nbsp&nbsp&nbsp&nbsp'+item.resumeEducationDegree"
                    style="display: flex;align-items: center"
                >
                  <template #title>
                    <a @click="goToResumeDetail(item.resumeId)">{{ item.resumeUsername }}</a>
                  </template>
                  <template #avatar>
                    <a-avatar
                        :size="34"
                        :src="'http://localhost:8080/image/download?name=' + item.resumeAvatar"
                    />
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>

    </div>
  </div>


</template>

<style scoped>
.jobseeker-home {
  width: 100%;
  background-color: #f5f5f5;
  box-sizing: border-box; /* 确保边框不会增加额外宽度 */
  display: flex;
  padding-left: 10px;
  height: auto;

  .left {
    border: 1px solid pink;
    width: 25%;
    height: 100%;

    .home-menu {
      width: 100%;
      height: 600px;
    }

    .friendship-link {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      width: 100%;
      height: 140px;

      .friendship-link-item {
        display: flex;
        align-items: center;
        width: 45%;
        height: 50%;
      }
    }
  }

  .main {
    display: flex;
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: calc(100% - 640px);
    flex-direction: column;
    flex-grow: 1; /* 让 .main 元素占据剩余的空间 */
    height: 100%;

    .carousel {
      width: 100%;
      height: 400px;

      .carousel-item {
        width: 100%;
        height: 400px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover; /* 或者使用object-fit: cover;根据需求选择 */
        }
      }
    }

    .bulletin {
      width: 100%;
      flex-grow: 1;
      height: 600px;
      overflow: auto; /* 内容超出时自动显示滚动条 */
      padding-bottom: 20px;
    }
  }

  .right {
    width: 30%;
    height: 100%;
    padding: 10px;

    .urgent_job {
      width: 100%;
      height: auto;
      border: 1px solid #ccc;
      border-radius: 20px;

      .right-title {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        height: auto;
        border: 1px solid #ccc;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;

        .title-item {
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }

}

:deep(.slick-slide) {
  text-align: center;
  height: 400px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-slide h3) {
  color: #fff;
}

</style>
